<template>
	<view class="editshopinfo">
		<view class="title">若修改门店信息，蜂鸟配送需审核</view>
		<view class="content_inc">
			<view class="content">
				<view class="con_title">门店名称</view>
				<view class="con_text">
					<input type="text" v-model="editdata.shop_name" placeholder="请输入门店名称" />
				</view>
			</view>
			<view class="content">
				<view class="con_title">门店联系电话</view>
				<view class="con_text">
					<input type="text" v-model="editdata.phone" placeholder="请输入门店联系电话"/>
				</view>
			</view>
			<view class="content">
				<view class="con_title">门店副标题</view>
				<view class="con_text">
					<input type="text" v-model="editdata.sub_shop_name" placeholder="请输入门店副标题"/>
				</view>
			</view>
			<view class="content content_adr">
				<view class="con_text">
					<view class="con_title">门店详细地址</view>
					<image src="../../static/img/ic_edit_2.png" style="width: 42rpx;height: 42rpx;" @click="selectAdr()"></image>
				</view>
				<view>{{editdata.address}}</view>
			</view>
		</view>
		
		<button class="editBtn" type="primary" @click="editfun()">修改</button>
		
		<!-- 运营数据弹窗 -->
		<uni-popup ref="popup" :show="true" type="center" :maskClick="false">
			<view class="zlpopup">
				<view class="zlpopup_title">详细地址</view>
				<view class="zlpopup_con">
					<textarea v-model="editdataTemp.address" />
				</view>
				<view class="zlpopup_btn">
					<view class="btn_cancel" @click="addressClose(false)">取消</view>
					<view class="btn_confirm" @click="addressClose(true)">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { updateshopinfo,outofscope } from '../../api/index.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				editdata:{
					id:'',
					shop_name:'',
					phone:'',
					latitude: '',
					longitude: '',
					address:'',//详细地址
					sub_shop_name:'',
					province:'',//省
					city:'',//市
					district:'', //区
					
				},
				editdataTemp:{ //选择地址后的临时地址
					latitude: '',
					longitude: '',
					province:'',//省
					city:'',//市
					district:'', //区
					address:''  //编辑框里的临时地址
				}
			}
		},
		onLoad:function(data){
			//将带过来的参数赋值
			let shopdata = JSON.parse(data.editdata);
			this.editdata.id = shopdata.id;
			this.editdata.shop_name = shopdata.shop_name;
			this.editdata.phone = shopdata.phone;
			this.editdata.latitude = shopdata.latitude;
			this.editdata.longitude = shopdata.longitude;
			this.editdata.address = shopdata.address;
			this.editdata.sub_shop_name = shopdata.sub_shop_name;
		},
		methods: {
			//修改商户信息函数
			async editfun(){
				let that = this;
				let senddata = {
					id: that.editdata.id,
					latitude:that.editdata.latitude,
					longitude:that.editdata.longitude,
					province:that.editdata.province,
					city:that.editdata.city,
					district:that.editdata.district,
					address:that.editdata.address,
					phone:that.editdata.phone,
					shop_name:that.editdata.shop_name,
					sub_shop_name:that.editdata.sub_shop_name
				}
				let data = await updateshopinfo(senddata);
				if(data.code == 0){
					uni.showModal({
						title:'提示',
						content: data.msg,
						complete:function(){
							uni.navigateBack({})
							// uni.navigateTo({
							// 	url:'../shopdetail/shopdetail?suid='+senddata.id
							// })
						}
					})
				}
			},
			selectAdr:function(){
				let that = this;
				//选择地址
				cm.chooseLocation({
					success:function(res){
						console.log(res);
						let adrdata = JSON.parse(res)
						that.outofscopeFun(adrdata)
					}
				})
			},
			//判断两个经纬度距离是否超过100米
			outofscopeFun:function(adrdata){
				let that = this;
				outofscope({
					lat:that.editdata.latitude,//原经度
					lng:that.editdata.longitude,//原纬度
					latitude:adrdata.latitude,//现经度
					longitude:adrdata.longitude//现纬度
				}).then((res) => {
					console.log(res)
					if(res.data.status == 1){//没有超过100米直接赋值
						that.editdata.latitude = adrdata.latitude;
						that.editdata.longitude = adrdata.longitude;
						that.editdata.province = adrdata.province;
						that.editdata.city = adrdata.city;
						that.editdata.district = adrdata.area;
						that.editdata.address = adrdata.address+adrdata.detailAddress;
					}else if(res.data.status == 0){//超过了100米则将临时地址存储起来
						uni.showModal({
							title:'温馨提示',
							content:'当前门店修改地址与原地址间距超过100米，若要修改则关闭外卖,确认修改吗？',
							success:function(res){
								if(res.confirm){
									//将获取到的新地址数据存储到临时地址里面
									that.editdataTemp.latitude = adrdata.latitude;
									that.editdataTemp.longitude = adrdata.longitude;
									that.editdataTemp.province = adrdata.province;
									that.editdataTemp.city = adrdata.city;
									that.editdataTemp.district = adrdata.area;
									that.editdataTemp.address = adrdata.address+adrdata.detailAddress;
									
									that.addressOpen();
								}
							}
						})
					}else{
						alert(res.msg)
					}
				}).catch((e) => {
					console.log(e)
				})
			},
			addressOpen:function(){
			    this.$refs.popup.open()
			},
			addressClose:function(isconfirm){
				let that = this;
				if(isconfirm){ //假如客户确定修改地址，则将临时地址的数据赋值到真数据里面
					that.editdata.latitude = that.editdataTemp.latitude;
					that.editdata.longitude = that.editdataTemp.longitude;
					that.editdata.province = that.editdataTemp.province;
					that.editdata.city = that.editdataTemp.city;
					that.editdata.district = that.editdataTemp.district;
					that.editdata.address = that.editdataTemp.address;
				}
			    this.$refs.popup.close()
			}
		},
		components:{
			uniPopup
		}
	}
</script>


<style lang="scss" scoped>
	.editshopinfo{
		position: relative;
		font-size: $uni-font-size-base;
		height: 100%;
		.title{
			padding: 20rpx 30rpx;
			color: #666666;
		}
		.content_inc{
			padding: 0 30rpx;
			.content{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				background-color: #FFFFFF;
				border-bottom: 1rpx $uni-border-color-e5 solid;
				.con_title{
					color: #666666;
				}
				.con_text{
					input{
						font-size: $uni-font-size-base;
						text-align: right;
					}
				}
				&.content_adr{
					display: block;
					.con_text{
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.editBtn{
			position: absolute;
			width: 90%;
			bottom: 200rpx;
			left: 5%;
		}
		.zlpopup{
			background-color: #FFFFFF;
			width: 550rpx;
			margin: 0 auto;
			font-size: $uni-font-size-lg;
			border-radius: $uni-border-radius-lg;
			.zlpopup_title{
				text-align: center;
				font-weight: bold;
				padding: 30rpx 0;
			}
			.zlpopup_con{
				box-sizing: border-box;
				width: 100%;
				padding: 0 45rpx 45rpx 45rpx;
				height: 300rpx;
				textarea{
					background-color: #F5F5F5;
					box-sizing: border-box;
					font-size: $uni-font-size-base;
					padding: 30rpx;
					width: 100%;
					height: 100%;
				}
			}
			.zlpopup_btn{
				display: flex;
				border-top: 1rpx solid $uni-border-color-e5;
				view{
					padding: 20rpx 0;
					text-align: center;
					width: 50%;
					&.btn_confirm{
						border-left: 1rpx solid $uni-border-color-e5;
						color: #007AFF;
					}
				}
			}
		}
	}
</style>
